<template>
	<view>
		<view class="top-tabs u-f-jse u-f-ac">
			<block v-for="(item,index) in titles" :key="index">
				<view class="tab-item animated " @tap="ontabtap(index)" :class="[index==currentIdx?'active fadeIn':'']">
					{{item}}
					<view class="b-blobk" ></view>
				</view>
			</block>
			
		</view>
	</view>
</template>

<script>
	
	export default {
		props:{
			currentIdx:{
				type:Number,
				default:0
			}
		},
		data() {
			return {
				titles:['待处理','进行中','已处理']
			}
		},
		computed:{
		},
		methods: {
			ontabtap(index) { //点击tab切换idx
				this.$emit('ontabtap', index)
			}
		},
		components:{}
		
	}
</script>

<style scoped lang="less">
	.top-tabs {
		height: 100upx;
		// background: red;
		border-bottom: 1upx solid #999999;
		.tab-item {
			position: relative;
			&.active{
				color: #007AFF;
				.b-blobk{
					position: absolute;
					width: 100upx;
					bottom: -24upx;
					left: 50%;
					transform: translateX(-50%);
					border-bottom: 8upx solid #007AFF;
				}
			}
			
		}
		
	}
</style>